function getId() {
    let url = location.href // 210906-熊猫优选/detailsPage.html?id=105526793
    let urlStr = url.substring(url.indexOf('?') + 1)
    let urls = urlStr.split('=')
    let id = urls[1]
    console.log(id)
    return id
}


function getProductDetail() {
    let id = getId()
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        type: 'get',
        data: {
            id
        },
        success: function (result) {
            console.log(result)
            if (result.code == 200) {
                let response = result.data
                showDetailImg(response)
            }
        }
    })
}



/**
 * 详情页面数据渲染
 */

function showDetailImg(detal) {
    let photos = detal.detail.photo //商品图片
    let ProductInfo = detal.detail //商品信息
    let sellerInfo = detal.shop //卖家
    let detailspics = detal.detail.descContentList //详情图片

    let productPicStr = '' //商品图片模板字符串
    let ProductInfoStr = '' //商品信息模板字符串
    let sellerStr = '' //卖家模板字符串
    let detapic = ''

    photos.forEach(photo => {
        productPicStr += `
         <div class="swiper-slide" style="width: 282px;">
            <img src="${photo.url}" alt="" class="cmd-img">
         </div>
         `
    });


    let pif = {
        ProductInfo
    }
    ProductInfoStr += `
        <h1 class="cmd-title">
           <div class="title-icons">
               <img src="images/dianputubiao.png" alt="天猫淘宝" class="platform">
               <img src="images/baoyoutubiao.png" alt="是否包邮" class="free-postage">
           </div>
               ${ProductInfo.title}
        </h1>
        <div class="cmd-price">
           <p class="original-price">
               <i>原价${ProductInfo.originPrice}</i>
           </p>
           <span class="prices">
               <i class="value-tag" style="font-size: 20px; font-style: normal;">￥</i>
               <span class="digit" style="font-size: 28px;">${ProductInfo.price}</span>
           </span>
           <span class="coupon-info">${ProductInfo.couponValue}</span>
           <span class="sale-num">${ProductInfo.saleNum}人已购买</span>
        </div>
        <p class="expire-date">
           <span>优惠有效期：${ProductInfo.expireDate}</span>
        </p>
        <div class="clear"></div>
        <button class="goTB-btn" style="background-color: rgb(250, 88, 90);">加入购物车</button>
        `
    let slr = {
        sellerInfo
    }

    sellerStr += `
         <img src="${sellerInfo.picUrl}" alt="卖家头像" class="shop-image">
         <p class="shop-name">${sellerInfo.nickname}</p>
        `

    detailspics.forEach(detailspic => {
        detapic += `
                <img src="${detailspic.image.url}" alt="详情页详情图">
            `
    })

    $('.swiper-wrapper').html(productPicStr)

    $('.cif-container').html(ProductInfoStr)

    $('.shop-nameandimg').html(sellerStr)

    $('.imgs').html(detapic)

    myswiper()
}

function myswiper() {
    /**
     * 轮播
     */
    var mySwiper = new Swiper('.swiper-container', {
        autoplay:true,
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })
}


/**
 * 
 */
getProductDetail()